import React, { useState, useCallback } from "react";
import { Menu, Button, Row, Col, Image } from 'antd';
import { Navigate, useNavigate, Route, Routes } from 'react-router-dom'

import Home from "./home/Home";
import Mine from "./home/Mine";
import Reg from "./home/mine/Reg";
import Download from './home/Download'
import Cooperation from "./home/Cooperation";
import Login from "./home/mine/Login";
import UserCenter from './home/mine/UserCenter'

const items = [
        {
                label: '首页',
                key: '/home',
        },
        {
                label: '下载App',
                key: '/download',
        },
        {
                label: '商务合作',
                key: '/cooperation',
        },
        {
                label: '我的',
                key: '/mine',
        },
]


function Index() {
        const [current, setCurrent] = useState('/home');
        const navigate = useNavigate()

        const changeRoute = useCallback(({ key }) => {
                setCurrent(key)
                navigate('/index' + key)
        }, [])
        const goInto = useCallback((path) => {
                navigate(path)
        }, [])

        return (
                <>
                        {/* 导航条 */}
                        <Row style={{ height: '90px' }}>
                                <Col span={13} style={{ lineHeight: '90px' }}>
                                        <Image src='https://mall.s.maizuo.com/056b03f80ecfb34900d94c1c9a8f5ae6.jpg'
                                                style={{ width: '135px', lineHeight: '48px', marginLeft: 40 }}
                                                preview={false}
                                        />
                                </Col>
                                <Col span={9}>
                                        <Menu onClick={changeRoute} selectedKeys={[current]} mode="horizontal" items={items}
                                                style={{ width: '100%', height: 70, backgroundColor: '#fff', lineHeight: '90px', borderBottom: 'none', fontSize: '16px' }} />
                                </Col>
                                <Col span={1}>
                                        <Button type="link" style={{
                                                backgroundColor: '#ff7620', color: '#fff', fontSize: 16,
                                                borderRadius: 4, width: 136, height: 44, position: 'relative', right: 70, top: 23
                                        }}
                                                onClick={goInto.bind(null, '/movie')} > 立即购票</Button>
                                </Col>
                        </Row>
                        <Routes>
                                <Route index element={<Navigate to='home' />} />
                                <Route path='home/*' element={<Home />} />
                                <Route path='mine/*' element={<Mine />} >
                                         <Route index element={<Navigate to='usercenter' />} />
                                        <Route path='reg' element={<Reg />} />
                                        <Route path='login' element={<Login />} />   
                                        <Route path='usercenter' element={<UserCenter />} />         
                                </Route>
                                <Route path='download' element={<Download />} />
                                <Route path='cooperation' element={<Cooperation />} />
                        </Routes>
                        <Row>
                        
                        </Row>
                        <Row style={{backgroundColor: '#000',width:'100%',height:260,}}>
                                <Col span={3}></Col>
                                <Col>
                                        <Image src='https://mall.s.maizuo.com/73552ddcedac25b8a8c8297a565f0d42.jpg' preview={false} style={{ marginTop: '30px' }} />
                                </Col>
                                <Col>
                                        <div style={{ marginTop: '30px', marginLeft: '20px', color: '#fff' }}>
                                                <strong>卖座，不只是电影</strong>
                                                <p>地址:</p>
                                                <p>深圳市南山区高新科技园中区科苑路15号</p>
                                                <p>科兴科学园B栋3单元1601</p>
                                                <p>电话：</p>
                                                <p>0755-26971933</p>
                                        </div>
                                </Col>
                                <Row>
                                </Row>
                                <Col span={6}></Col>
                                <Col>
                                        <Image src='https://mall.s.maizuo.com/cfb4d59688fe7865be7ae6fafaa0915e.jpg' preview={false} style={{ marginTop: '30px' }} />
                                </Col>
                                <Col>
                                        <div style={{ marginTop: '30px', marginLeft: '20px', color: '#fff' }}>
                                                <strong>扫码关注「卖座网」公众号</strong>
                                                <p>Copyright © 2020 maizuo.</p>
                                                <p>All Rights Reserved</p>
                                                <p>深圳市华宇讯科技有限公司 版权所有</p>
                                                <p>增值业务经营许可证: 粤B2-200502318</p>
                                        </div>

                                </Col>
                        </Row>
                </>
        )
}

export default Index;